test/unit/server/api/registry/timeline/pkg.get.spec.ts (2)

7-7: Avoid Function in the cached-handler stub.

Using Function removes parameter/return checks and can hide handler-signature drift; prefer an explicit typed callback signature.

♻️ Proposed refactor

-vi.stubGlobal('defineCachedEventHandler', (fn: Function) => fn)
+vi.stubGlobal(
+  'defineCachedEventHandler',
+  <T>(fn: (event: H3Event) => T, _opts?: unknown) => fn,
+)

As per coding guidelines "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index".

---

189-190: Remove any from version lookup predicates.

The predicate type can be inferred from result.versions; any weakens test type guarantees.

♻️ Proposed refactor

-    const latest = result.versions.find((v: any) => v.version === '1.0.0')
-    const next = result.versions.find((v: any) => v.version === '2.0.0-beta.1')
+    const latest = result.versions.find(v => v.version === '1.0.0')
+    const next = result.versions.find(v => v.version === '2.0.0-beta.1')

As per coding guidelines "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index".

app/pages/package-timeline/[[org]]/[packageName].vue (1)

390-392: ⚠️ Potential issue | 🟡 Minor

Empty state does not distinguish between loading and initial fetch failure.

If the initial useAsyncData request fails, timelineEntries remains empty and the spinner displays indefinitely. Consider adding an error state to inform users when the initial load has failed.

Suggested approach

Capture the error from useAsyncData:

-const { data: initialTimeline } = await useAsyncData(`timeline:${packageName.value}`, () =>
+const { data: initialTimeline, error: initialError } = await useAsyncData(`timeline:${packageName.value}`, () =>
   fetchTimeline(0),
 )

Then render an error state in the template:

       <!-- Empty state -->
-      <div v-else-if="!timelineEntries.length" class="py-20 text-center">
+      <div v-else-if="initialError" class="py-20 text-center text-red-600 dark:text-red-400">
+        {{ $t('package.timeline.initial_load_error') }}
+      </div>
+      <div v-else-if="!timelineEntries.length" class="py-20 text-center">
         <span class="i-svg-spinners:ring-resize w-5 h-5 text-fg-subtle" />
       </div>

app/pages/package-timeline/[[org]]/[packageName].vue (2)

14-14: Prefer auto-imported $t() over destructuring from useI18n().

The project pattern uses the globally auto-imported $t() in <script setup> rather than destructuring t from useI18n(). The $t() global works inside computed properties and callbacks in this Nuxt i18n setup.

Suggested change

-const { t } = useI18n()

Then replace all t(...) calls with $t(...) in the computed property (lines 175, 179, 193, 194, 207, 219, 226, 236, 243, 253, 260, 270, 277).

Based on learnings: "In this Nuxt 4 project with nuxtjs/i18n v10, $t() and other globals like $n, $d are exposed in <script setup> and work inside callbacks... Do not destructure t from useI18n(); rely on the global provided by Nuxt i18n in script setup."

---

74-74: Blocking loadMore while sizes are fetching may degrade UX.

sizesLoading.value prevents loading more versions whenever any install-size request is in flight. Since size fetches are best-effort and don't affect pagination correctness, this coupling unnecessarily delays content loading for users scrolling through the timeline.

Consider decoupling size loading from pagination:

Suggested change

 async function loadMore() {
-  if (loadingMore.value || sizesLoading.value) return
+  if (loadingMore.value) return